<template>
	<cl-drawer
		ref="drawer"
		:props="{
			title: title + '分公司',
			size: '30%',
			appendToBody: true
		}"
		show-confirm
		confirm-text="提交"
		@close="reset"
		@confirm="submit"
		:saving="saving"
	>
		<el-form ref="form" :model="form" :rules="rules" label-position="top" :disabled="saving">
			<el-form-item label="基本信息">
				<el-card shadow="never">
					<el-form-item
						label="分公司名称"
						required
						v-if="type == 'add'"
						style="margin-bottom: 0;"
					>
						<el-form-item
							v-for="(item, index) in form.company_name_list"
							:prop="`company_name_list.${index}.company_name`"
							:rules="rules.company_name"
							:key="item.uuid"
						>
							<el-input v-model="item.company_name" placeholder="请填写分公司名称">
								<template #append>
									<el-button
										icon="el-icon-plus"
										@click="addCompanyName"
										v-if="form.company_name_list.length == index + 1"
									/>
									<el-button
										icon="el-icon-minus"
										v-else
										@click="delCompanyName(index)"
									/>
								</template>
							</el-input>
						</el-form-item>
					</el-form-item>
					<el-form-item label="分公司名称" prop="company_name" v-else>
						<el-input v-model="form.company_name" placeholder="请填写分公司名称" />
					</el-form-item>
					<el-form-item label="负责人" prop="company_contact">
						<el-input v-model="form.company_contact" placeholder="请填写负责人名称" />
					</el-form-item>
					<el-form-item label="联系电话" prop="company_mobile">
						<el-input
							v-model="form.company_mobile"
							placeholder="请填写联系电话"
							maxlength="11"
						/>
					</el-form-item>
				</el-card>
			</el-form-item>
		</el-form>
	</cl-drawer>
</template>
<script>
import { uuid } from "@/utils";
import { validate } from "@/utils/validate";
export default {
	props: {
		biz_id: {
			type: [String, Number],
			default: ""
		}
	},
	data() {
		return {
			form: {
				company_id: "",
				company_name_list: [],
				company_name: "",
				company_contact: "",
				company_mobile: ""
			},
			rules: {
				company_name: [{ required: true, message: "请填写分公司名称" }],
				company_contact: [
					// { required: true, message: "请填写负责人名称" }
				],
				company_mobile: [
					// { required: true, message: "请填写联系电话" },
					{ pattern: validate.mobile, message: "联系电话格式不正确" }
				]
			},
			type: "add",
			saving: false
		};
	},
	computed: {
		title() {
			let title = "";
			switch (this.type) {
				case "add":
					title = "新增";
					break;
				case "edit":
					title = "修改";
					break;
				case "copy":
					title = "复制";
					break;
			}
			return title;
		}
	},
	methods: {
		open(type = "add", data = {}) {
			this.type = type;
			this.$refs.drawer.create(() => {
				this.form.company_name_list = [];
				if (type == "add") {
					this.addCompanyName();
					return;
				}
				Object.keys(this.form).forEach(key => {
					this.form[key] = data[key] ?? "";
				});
				if (data.base_mobile == "MA==") return;
				this.form.company_mobile = atob(data.base_mobile ?? "");
			});
		},
		close() {
			this.$refs.drawer.close();
		},
		reset() {
			this.form = {
				company_id: "",
				company_name_list: [],
				company_name: "",
				company_contact: "",
				company_mobile: ""
			};
			this.$nextTick(() => {
				this.$refs.form && this.$refs.form.resetFields();
			});
		},
		addCompanyName() {
			this.form.company_name_list.push({
				uuid: uuid(),
				company_name: ""
			});
		},
		delCompanyName(index) {
			this.form.company_name_list.splice(index, 1);
		},
		submit() {
			this.$refs.form.validate(async (valid, errors) => {
				this.showFormErr(errors);
				if (!valid) return;
				const { type, biz_id } = this;
				const { company_name_list, ...args } = this.form;
				this.saving = true;
				let form = { ...args, biz_id };
				if (type == "add") {
					form.company_name = company_name_list.map(v => v.company_name).join();
				}
				await this.$service.company[type == "edit" ? "update" : "add"](form).done(() => {
					this.saving = false;
				});
				this.$message.success(`${this.title}成功`);
				this.$emit("confirm");
				this.close();
				await this.getBizRefCompany(biz_id);
			});
		}
	}
};
</script>
